<template>
  <div>
    <div class="video">
      <div class="sidebar">
        <div class="sidebar s-item" @click="changOp(1)" :class="[idx == 1 ? 'active' : '']">
          <i class="el-icon-s-data"></i>
          <span>章节</span>
        </div>
        <div class="sidebar s-item" @click="changOp(2)" :class="[idx == 2 ? 'active' : '']">
          <i class="el-icon-question"></i>
          <span>问答</span>
        </div>
        <div class="sidebar s-item" @click="changOp(3)" :class="[idx == 3 ? 'active' : '']">
          <i class="el-icon-edit"></i>
          <span>笔记</span>
        </div>
        <div class="sidebar s-item" @click="changOp(4)" :class="[idx == 4 ? 'active' : '']">
          <i class="el-icon-s-comment"></i>
          <span>评论</span>
        </div>
      </div>
      <div class="player-container">
        <vue-core-video-player src="https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4"
          title="坤课网" :autoplay="false"></vue-core-video-player>
      </div>
      <div class="op-main" v-if="isOp">
        <div v-if="idx == 1">
          <directory></directory>
        </div>
        <div v-else-if="idx == 2">
          <question></question>
        </div>
        <div v-else-if="idx == 3">
          <notebook></notebook>
        </div>
        <div v-else>
          <comment></comment>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import question from './question'
import notebook from './notebook'
import comment from './comment'
import directory from './directory'

export default {
  name: "learn",
  components: {
    question,
    notebook,
    comment,
    directory
  },
  data() {
    return {
      isOp: false,
      idx: -1,
    }
  },
  methods: {
    changOp(idx) {
      // 相同的就直接切换页面
      if (this.idx == idx) {
        this.isOp = !this.isOp;
      } else {
        // 不相同的就需要展示
        this.idx = idx;
        this.isOp = true;
      }
    },
    closeIdx() {
      this.idx = -1;
      this.isOp = false;
    }
  },
}
</script>

<style scoped>
.video {
  display: flex;
  justify-content: space-between;
  height: calc(100vh - 96px);
}

.sidebar {
  background: #1c1f21;
  width: 60px;
  display: flex;
  z-index: 1000;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: gray;
}

.s-item {
  cursor: pointer;
  margin: 20px 0;
  font-size: 13px;
}

.s-item i {
  font-size: 20px;
}

.s-item:hover {
  color: #409EFF;
}

.player-container {
  flex: 1;
}

.op-main {
  width: 500px;
}

.active {
  color: #409EFF;
}
</style>